


[Work Skin] Yelp Reviews

by kiwiana



Series: AO3 Work Skins [2]
Category: No Fandom
Genre: Fanwork Research & Reference Guides
Language: English
Status: Completed
Published: 2021-01-13
Updated: 2021-01-13
Packaged: 2021-03-17 20:07:06
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 1
Words: 1,975
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/28730922
Author URL: https://archiveofourown.org/users/kiwiana/pseuds/kiwiana
Summary: Live example and tutorial on how to include a Yelp product review in your work.
Series: AO3 Work Skins [2]
Series URL: https://archiveofourown.org/series/2099103
Comments: 8
Kudos: 8
Collections: A Guide to Coding and Fanworks, Fanfiction Reference Works, HTML & CSS stuffs





	[Work Skin] Yelp Reviews

**Author's Note:**

> After I posted my Amazon review skin yesterday, a friend asked if I could do the same for Yelp reviews, so I whipped this up. I might come back and look at user images later, but I'm posting without them for now!

### LIVE EXAMPLE

  
** YELP REVIEW: **

Username  
Location  
24 friends 130 reviews 79 photos

**[5 stars]** 01/01/2021

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  
**  
YELP REVIEW REPLY:   
**   


Username  
Business Owner  
01/01/2021

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  


### CSS CODE

The first thing you'll need to do is go to Dashboard - Skins and click 'My Work Skins', then click [Create Work Skin](https://archiveofourown.org/skins/new?skin_type=WorkSkin) in the top right-hand corner. **Note: if you're already using a work skin for this fic, you'll need to instead add the following CSS code into the bottom of your existing work skin, as fics can only use one skin at a time.**

Make sure the 'Type' is 'Work Skin', then give your skin a title and a description if needed. In the 'CSS' field, copy and paste the following:

`#workskin .yelp {  
background-color: #FFFFFF;  
color: #757280;  
list-style: none;  
margin: 0;  
padding: 0;  
border: 0;  
font-size: 14px;  
font-family: Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;  
font-weight: 400;  
vertical-align: middle;  
border-color: #eeeeef;  
}`

`#workskin .yelpusername {  
list-style: none;  
border-collapse: collapse;  
border-spacing: 0;  
margin: 0;  
padding: 0;  
border: 0;  
vertical-align: baseline;  
font-family: Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;  
font-size: 16px;  
line-height: 22px;  
font-weight: 700;  
color: #2b273c;  
text-align: left;  
}`

`#workskin .yelpuserlocation {  
color: #333333;  
list-style: none;  
border-collapse: collapse;  
border-spacing: 0;  
margin: 0;  
padding: 0;  
border: 0;  
font-size: 14px;  
font-family: Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;  
font-weight: 400;  
vertical-align: baseline;  
border-color: #eeeeef;  
}`

`#workskin .yelpuserstats {  
color: #757280;  
list-style: none;  
border-collapse: collapse;  
border-spacing: 0;  
margin: 0;  
padding: 0;  
border: 0;  
font-size: 14px;  
font-family: Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;  
font-weight: 400;  
font-color: #757280;  
border-color: #eeeeef;  
}`

`#workskin .yelp-friendcount {  
background: url('https://i.imgur.com/NKOtJaZ.jpg') left center;  
width: 14px;  
height: 14px;  
display: inline-block;  
vertical-align: middle;  
}`

`#workskin .yelp-reviewcount {  
background: url('https://i.imgur.com/qJifpFb.jpg') left center;  
width: 14px;  
height: 14px;  
display: inline-block;  
vertical-align: middle;  
}`

`#workskin .yelp-photocount {  
background: url('https://i.imgur.com/5jvFcQq.jpg') left center;  
width: 14px;  
height: 14px;  
display: inline-block;  
vertical-align: middle;  
}`

`#workskin .yelp-one-star {  
background: url('https://i.imgur.com/XkNVWPu.jpg') left center;  
width: 110px;  
height: 22px;  
display: inline-block;  
vertical-align: bottom;  
}`

`#workskin .yelp-two-star {  
background: url('https://i.imgur.com/RSm6n6y.jpg') left center;  
width: 110px;  
height: 22px;  
display: inline-block;  
vertical-align: bottom;  
}`

`#workskin .yelp-three-star {  
background: url('https://i.imgur.com/QiCi7sK.jpg') left center;  
width: 110px;  
height: 22px;  
display: inline-block;  
vertical-align: bottom;  
}`

`#workskin .yelp-four-star {  
background: url('https://i.imgur.com/7PU1xHa.jpg') left center;  
width: 110px;  
height: 22px;  
display: inline-block;  
vertical-align: bottom;  
}`

`#workskin .yelp-five-star {  
background: url('https://i.imgur.com/QhaSYiw.jpg') left center;  
width: 110px;  
height: 22px;  
display: inline-block;  
vertical-align: bottom;  
}`

`#workskin .yelpdate {  
color: #333333;  
list-style: none;  
margin: 0;  
padding: 0;  
border: 0;  
font-size: 100%;  
font-family: Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;  
vertical-align: middle;  
border-color: #eeeeef;  
width: 100%;  
box-sizing: border-box;  
vertical-align: middle;  
margin-left: 4px;  
margin-right: 4px;  
border-collapse: collapse;  
border-spacing: 0;  
}`

`#workskin .yelpreview {  
color: #2b273c;  
text-align: left;  
word-break: break-word!important;  
overflow-wrap: break-word!important;  
margin: 0;  
padding: 0;  
border: 0;  
font-family: Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;  
font-weight: 400;  
font-size: 14px;  
vertical-align: baseline;  
}`

`#workskin .yelpreply {  
background-color: #FFFFFF;  
color: #333333;  
list-style: none;  
margin: 0;  
padding: 0;  
border: 0;  
font-size: 100%;  
font-family: Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;  
vertical-align: baseline;  
padding-left: 24px!important;  
border-color: #eeeeef;  
border-left: 4px solid #eeeeef;  
}`

`#workskin .yelpreplyname {  
list-style: none;  
border-collapse: collapse;  
border-spacing: 0;  
margin: 0;  
padding: 0;  
border: 0;  
font: inherit;  
vertical-align: baseline;  
font-family: Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;  
font-size: 16px;  
line-height: 22px;  
font-weight: 700;  
color: #2b273c;  
text-align: left;  
}`

`#workskin .yelpreplytitle {  
list-style: none;  
border-collapse: collapse;  
border-spacing: 0;  
margin: 0;  
padding: 0;  
border: 0;  
font: inherit;  
vertical-align: baseline;  
font-family: Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;  
font-weight: 400;  
font-size: 14px;  
line-height: 20px;  
color: #757280;  
text-align: left;  
}`

`#workskin .yelpreplydate {  
list-style: none;  
margin: 0;  
padding: 0;  
border: 0;  
font: inherit;  
vertical-align: baseline;  
font-family: Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;  
font-weight: 400;  
font-size: 14px;  
line-height: 20px;  
color: #757280;  
text-align: left;  
}`

`#workskin .yelpreplytext {  
list-style: none;  
margin: 0;  
padding: 0;  
border: 0;  
vertical-align: baseline;  
font-family: Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;  
font-weight: 400;  
font-size: 14px;  
line-height: 20px;  
color: #2b273c;  
text-align: left;  
word-break: break-word!important;  
overflow-wrap: break-word!important;  
}`

`#workskin .hide {  
display: none;  
}`  


### HTML CODE

You'll need to make sure you're editing your fic in HTML mode, not Rich Text mode. If you usually use the Rich Text Editor, paste your fic in there without your Yelp review and then click on the HTML tab. This will convert it from Rich Text to HTML, and then you can insert the below HTML code. Alternatively, if you write in Google Docs the AO3 FAQ has a [link to a template](https://archiveofourown.org/faq/unofficial-browser-tools?language_id=en#posttools) you can use to add HTML to your writing which you can then paste directly into the HTML editor.

Once your fic is formatted in HTML, go ahead and add the following code where you want the Yelp review to show up in your work:

`<div class="yelp">  
<span class="hide"><strong><u>YELP REVIEW:</u></strong><br><br></span>`

`<span class="yelpusername">Username</span><br>  
<span class="yelpuserlocation">Location</span><br>  
<span class="yelpuserstats"><span class="yelp-friendcount"></span> 24 <span class="hide">friends</span> <span class="yelp-reviewcount"></span> 130 <span class="hide">reviews</span> <span class="yelp-photocount"></span> 79 <span class="hide">photos</span></span>`

`<span class="yelp-five-star"></span><span class="hide"><strong>[5 stars]</strong></span><span class="yelpdate">01/01/2021</span>`

`<span class="yelpreview">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>`

`</div>`

`<span class="hide"><strong><u>YELP REVIEW REPLY:</u></strong></span>  
<div class="yelpreply">`

`<span class="yelpreplyname">Username</span><br>`  
<span class="yelpreplytitle">Business Owner</span><br>  
<span class="yelpreplydate">01/01/2021</span>

`<span class="yelpreplytext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>`

`</div>`

Let's break down what each of these sections mean!

`<span class="hide"><strong><u>YELP REVIEW:</u></strong><br><br></span>`

This is just something I like to do for the people who turn off skins or are using screen readers -- it indicates that it's a Yelp review without the visual styling to clue them in. It doesn't show up when Creator Style is turned on, only when it's switched off. However, like I said, this is totally a personal preference thing and you can delete this line without any repercussions if you want to!

`<span class="yelpusername">Username</span><br>`

Edit 'Username' to whatever name/username you want to display.

`<span class="yelpuserlocation">Location</span><br>`

Edit 'Location' to whatever city and country you want to display.

`<span class="yelpuserstats"><span class="yelp-friendcount"></span> 24 <span class="hide">friends</span> <span class="yelp-reviewcount"></span> 130 <span class="hide">reviews</span> <span class="yelp-photocount"></span> 79 <span class="hide">photos</span></span>`

This shows the number of friends, reviews, and photos the user has on Yelp. You could delete this line without any repercussions if you wanted to, but you can have some fun with it! Make sure to ONLY change the numbers themselves. When Creator Style is turned on, an image will appear before each number; when Creator Style is turned off, it will instead read ‘# friends # reviews # photos’

`<span class="yelp-five-star"></span><span class="hide"><strong>[5 stars]</strong></span><span class="yelpdate">01/01/2021</span>`

This is where both the rating (1-5) and the date of the review are entered. For a rating less than 5, change the `<span class="yelp-five-star">` to yelp-one-star, yelp-two-star, yelp-three-star, or yelp-four-star as required. You'll then want to change [5 stars] as well. [5 stars] (or whatever other value you choose to use) will only show up when Creator Style is turned off in place of the stars image which is displayed when Creator Style is turned on. The date can be adjusted to whatever makes sense.

`<span class="yelpreview">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>`

This is where you write the review itself. If you need to insert line breaks, you can do that using the `<br />` tag.

**Note: If you don’t want to include the owner reply, delete everything from`<span class="hide"><strong><u>YELP REVIEW REPLY:</u></strong></span>` onwards.**

`<span class="hide"><strong><u>YELP REVIEW REPLY:</u></strong></span>`

This is just something I like to do for the people who turn off skins or are using screen readers -- it indicates that it's a Yelp review without the visual styling to clue them in. It doesn't show up when Creator Style is turned on, only when it's switched off. However, like I said, this is totally a personal preference thing and you can delete this line without any repercussions if you want to!

You’ll notice that unlike in the main review, this piece of code appears BEFORE `<div class="yelpreply">` — that’s because otherwise, it created an ugly extra indented space above the owner reply that looked terrible.

`<span class="yelpreplyname">Username</span><br>`

Edit 'Username' to whatever name/username you want to display.

`<span class="yelpreplytitle">Business Owner</span><br>`

If you want to, you can edit 'Business Owner' to a different company role.

`<span class="yelpreplydate">01/01/2021</span>`

The date can be adjusted to whatever makes sense.

`<span class="yelpreplytext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>`

This is where you write the reply to the review. If you need to insert line breaks, you can do that using the `<br />` tag.

And that's it! Then you have your Yelp review looking lovely in your fic. If you want to see what it looks like with Creator Style turned off, go ahead and flick it off at the top of this page.

One final note: if you’re posting multiple Yelp reviews in a row, I recommend adding one `<br />` tag between each set. Otherwise they wind up a little squashed!

**Author's Note:**

> If you have any questions please feel free to drop them below, and I'd also love to see a link if you use this skin in one of your works!


End file.
